<template lang="pug">
div
</template>

<script>
import NavDiv from '../../modules/nav'
import { getCoupon, updateCoupon } from '../../vuex/action'
import ObjSingleSelect from '../../modules/select/objSingle'

export default {
  name: 'coupon',
  components: {
    NavDiv,
    ObjSingleSelect,
  },
  vuex: {
    getters: {
      couponSource: ({ coupon }) => coupon.coupon,
    },
    actions: {
      getCoupon,
      updateCoupon,
    }
  },
  data () {
    return {
      coupon: null,
      mode: 'view',
      group: 0,
    }
  },
  methods: {
    save () {
      catchError(async () => {
        let data = _.cloneDeep(this.coupon)
        await this.updateCoupon(data)
        await this.getCoupon(data.id)
        this.mode = 'view'
      }, '更新成功')
    },
    cancel () {
      this.mode = 'view'
      this.coupon = _.cloneDeep(this.couponSource)
    },
  },
  route: {
    data({ to: { params: { id }, query: { mode } } }) {
      catchError(async () => {
        await this.getCoupon(id)
        if (mode) {
          this.mode = mode
        }
      })
    }
  },
  ready () {
    $(this.$el).find('.dropdown').dropdown({
      on: 'hover'
    })
  },
  watch: {
    couponSource: {
      handler (val, old) {
        this.helper.title(`优惠券 ${val.name}`)
        this.coupon = _.cloneDeep(val)
      },
      deep: true,
      immediate: true,
    },
  },
}
</script>

<style lang="sass" scoped>
</style>
